<template>
	<view class="box" :style="theme">
		<!-- 搜索框 -->
		<view class="head mb2 flex">
			<u-search shape="square" placeholder="请输入项目名称" v-model="inputValue" clearabled :show-action="false"
				@search="searchBtn" @clickIcon="searchBtn" height="76rpx" style="flex: 1;">
			</u-search>
			<view class="flex sx" @click="showPop = true">
				<image :src="imgHost+'/ic_shaixuan.png'"></image>筛选
			</view>
		</view>
		<!-- 列表 -->
		<view class="ul">
			<view v-for="item in list" :key="item.id" @click="jump('/pages/aboutBall/detail?id=',item.id)" class="li">
				<view class="top flex flex_between">
					<image :src="item.projectPic" class="left"></image>
					<view class="right">
						<view class="name flex flex_between">
							<text class="f30 c1 fwb limit-1-line">{{ item.name }}</text>
						</view>
						<view class="address">
							{{item.projectName}}
						</view>
					</view>
				</view>
				<view class="f24 mt20">
					<text class="c6">活动时间：</text>
					<text class="c3">{{item.acTime}}</text>
				</view>
				<view class="rightTip flex flex_center">
					报名<text v-if="item.price>0">¥{{item.price }}</text>
					<text v-else class="green">免费</text>
				</view>
			</view>
			<u-loadmore v-if="end && list.length >= 10" :status="status" line />
		</view>
		<view v-if="list.length === 0" class="no-order">
			<image :src="imgHost+'/default_nodata.png'"></image>
			<view>暂无数据</view>
		</view>
		<u-popup :show="showPop" round mode="bottom">
			<view class="popcnt">
				<view class="popBt">
					筛选
					<u-icon name="close" @click="showPop =false"
						custom-style="position: absolute;right: 30rpx;top: 10rpx" size="40rpx" color="#999" />
				</view>
				<view class="sxBt">
					项目分类
				</view>
				<view class="flex sxUl">
					<view v-for="(item, index) in projectlist" :key="index"
						:class="categoryIds.indexOf(item.id) > -1?'on':''" @click="categoryIdsBtn(item)" class="mb3">
						{{ item.projectName }}
					</view>
				</view>
				<view class="sxBt" style="margin-top: 0;">
					约球时间
				</view>
				<view class="flex sxUl">
					<view class="chan">
						<view @click="show = true" style="flex: 1;">
							<u--input v-model="start" fontSize="26rpx" placeholder="开始时间" border="none"
								inputAlign="center" readonly></u--input>
						</view>
						<text class="jg">-</text>
						<view @click="showb = true" style="flex: 1;">
							<u--input v-model="endTime" fontSize="26rpx" placeholder="结束时间" border="none"
								inputAlign="center" readonly></u--input>
						</view>
					</view>
				</view>
				<view class="sxBt">
					价格
				</view>
				<view class="flex sxUl">
					<view class="chan">
						<u--input v-model="min" fontSize="26rpx" type="digit" placeholder="最低价" border="none"
							inputAlign="center" clearable></u--input>
						<text class="jg">-</text>
						<u--input v-model="max" fontSize="26rpx" type="digit" placeholder="最高价" border="none" clearable
							inputAlign="center"></u--input>
					</view>
				</view>
				<view class="flex flex_between">
					<view class="czBtn" @click="czBtn">重置</view>
					<view class="tjBtn" @click="searchBtn">确认</view>
				</view>
			</view>
			<u-datetime-picker :show="show" v-model="value1" mode="datetime" @confirm="confirm"
				@cancel="cancel"></u-datetime-picker>
			<u-datetime-picker :show="showb" v-model="value2" mode="datetime" @confirm="confirmb"
				@cancel="cancelb"></u-datetime-picker>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				inputValue: '',
				list: [],
				showPop: false,
				categoryIds: [],
				projectlist: [],
				show: false,
				type: 1,
				value1: '',
				status: 'nomore',
				page: 1,
				end: false,
				firstQueryTime: '',
				min: '',
				max: '',
				start: '',
				endTime: '',
				ven: 0,
				show: false,
				showb: false,
				value1: Number(new Date()),
				value2: Number(new Date()),
			}
		},
		onLoad(ops) {
			this.ven = ops.ven || 0
		},
		onShow() {
			this.getpzlist()
			this.searchBtn()
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			confirm(e) {
				this.show = false
				this.start = this.formatDate(e.value)
			},
			cancel() {
				this.show = false
			},
			confirmb(e) {
				this.showb = false
				this.endTime = this.formatDate(e.value)
			},
			cancelb() {
				this.showb = false
			},
			formatDate(date) {
				let _date = new Date(parseInt(date));
				let y = _date.getFullYear();
				let m = _date.getMonth() + 1;
				m = m < 10 ? ('0' + m) : m;
				let d = _date.getDate();
				d = d < 10 ? ('0' + d) : d;
				let h = _date.getHours();
				h = h < 10 ? ('0' + h) : h;
				let minute = _date.getMinutes();
				let second = _date.getSeconds();
				minute = minute < 10 ? ('0' + minute) : minute;
				second = second < 10 ? ('0' + second) : second;
				// console.log( y + '-' + m + '-' + d + ' ' + '　' + h + ':' + minute + ':' + second) 
				let dates = y + '-' + m + '-' + d + ' ' + h + ':' + minute;
				return dates;
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			bindDateChange(e) {
				this.start = e.detail.value;
			},
			bindDateChangeb(e) {
				this.endTime = e.detail.value;
			},
			getpzlist() {
				this.$app.ajax({
					api: this.$api.getProject(),
					data: {
						param: {
							venueId: this.venueId,
							type: "0",
							status: '1'
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.projectlist = res.recordList
					}
				}).catch(() => {})
			},
			czBtn() {
				this.categoryIds = []
				this.min = ''
				this.max = ''
				this.start = ''
				this.endTime = ''
				this.searchBtn()
			},
			szJlBtn(item) {
				let arr = [...this.onTeach]
				var index = arr.indexOf(item.teacherId)
				if (index > -1) {
					arr.splice(index, 1);
				} else {
					arr.push(item.teacherId)
				}
				this.onTeach = arr
			},
			categoryIdsBtn(item) {
				let arr = [...this.categoryIds]
				var index = arr.indexOf(item.id)
				if (index > -1) {
					arr.splice(index, 1);
				} else {
					arr.push(item.id)
				}
				this.categoryIds = arr
			},

			searchBtn() {
				this.firstQueryTime = this.$app.firstQueryTime()
				this.list = [];
				this.page = 1;
				this.end = false;
				if (this.min && this.max && Number(this.min) > Number(this.max)) {
					this.$app.showToast('最低价不能大于最高价')
					return false;
				}
				this.getList()
			},
			getList() {
				this.showPop = false
				this.$app.ajax({
					api: this.$api.appJointSiteList(),
					data: {
						pagination: {
							firstQueryTime: this.firstQueryTime,
							page: this.page,
							rows: 10
						},
						param: {
							keyword: this.inputValue,
							categoryIds: this.categoryIds,
							minPrice: this.min,
							endTime: this.endTime,
							startTime: this.start,
							maxPrice: this.max,
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						if (!res.recordList || res.recordList.length < 10) {
							this.end = true
						}
						if (res.recordList) {
							this.list = this.list.concat(res.recordList)
						}
					}
				}).catch(() => {})
			},
			reachBottom() {
				if (!this.end) {
					this.page += 1;
					this.getList();
				}
			}
		},
		onReachBottom() {
			this.reachBottom()
		}

	}
</script>
<style scoped lang="scss">
	.head {
		background-color: #fff;
		padding: 30rpx;
		box-sizing: border-box;
		position: sticky;
		left: 0;
		top: 0;
		z-index: 999;

		.sx {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-left: 30rpx;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 8rpx;
			}

			// &:first-of-type {
			// 	margin-left: 0;
			// }
		}
	}

	.popcnt {
		padding: 30rpx;
		box-sizing: border-box;
		max-height: 100vh;
		overflow-y: auto;

		.popBt {
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: bolder;
			position: relative;
			color: #222222;
			text-align: center;
			padding: 10rpx 0 40rpx;
		}

		.sxBt {
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			margin: 30rpx 0;
		}
		.jg {
			margin: 0 20rpx;
		}

		.sxUl {
			flex-wrap: wrap;
		
			view {
				width: 154.5rpx;
				line-height: 64rpx;
				background: $bjColor;
				color: #333333;
				border-radius: 36rpx;
				text-align: center;
				font-size: 26rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				margin-right: 24rpx;
				/* autoprefixer: off */
				-webkit-box-orient: vertical;

				/* autoprefixer: on */
				&.chan {
					width: 530rpx;
					margin-right: 0;
					display: flex;
					align-items: center;
					text-align: center;
					padding: 0 20rpx;
					height: 64rpx;
					justify-content: space-around;
					view {
						margin-right: 0;
					}
				}

				&:nth-child(4n) {
					margin-right: 0;
				}

				&.on {
					background: $color;
					color: #fff;
				}
			}
		}


		.czBtn {
			color: #666666;
			width: 335rpx;
			line-height: 88rpx;
			background: $bjColor;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			text-align: center;
			margin-top: 30rpx;
		}

		.tjBtn {
			width: 335rpx;
			line-height: 88rpx;
			background: $color;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #fff;
			text-align: center;
			margin-top: 30rpx;
		}
	}

	.ul {
		box-sizing: border-box;
		padding: 20rpx 30rpx;

		.li {
			box-sizing: border-box;
			padding: 30rpx 30rpx;
			background: linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 100%);
			border-radius: 8rpx;
			margin-bottom: 20rpx;
			position: relative;

			.rightTip {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 160rpx;
				line-height: 60rpx;
				background: $color;
				border-radius: 30rpx 0rpx 8rpx 0rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
			}

			.top {
				.left {
					width: 104rpx;
					height: 104rpx;
					border-radius: 8rpx;
					border: 1rpx solid #F3F3F3;
					margin-right: 24rpx;
					flex: none;
				}

				.right {
					flex: 1;

					.name {
						margin-bottom: 14rpx;

						.wu {
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							margin-left: 10rpx;
							flex: none;
							width: 3em;
						}

						.on {
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: $color2;
							margin-left: 10rpx;
							flex: none;
							width: 3em;
						}
					}
				}

			}
		}
	}
</style>